<template>
  <div class="menu" :style="{ width: MenuWidth + 'px' }">
    <div class="logo" @click="btnFn(menus)"></div>
    <el-menu
      :collapse="!collapseSwitch"
      :collapse-transition="false"
      :default-active="num"
      class="el-menu-vertical-demo"
      background-color="#fff"
      text-color="#4e5bf8"
      active-text-color="#e47833"
      @open="handleOpen"
      @close="handleClose"
    >
      <!-- @open="handleOpen"
      @close="handleClose" -->
      <template v-for="(oneItem, oneI) in menus">
        <el-menu-item
          v-if="!oneItem.children"
          :key="oneI.toString()"
          :index="oneI.toString()"
          @click="$router.push(oneItem.path)"
        >
          <template>
            <i :class="oneItem.icon"></i>
            <span slot="title">{{ oneItem.uname }}</span>
          </template>
          <template></template>
        </el-menu-item>
        <el-submenu v-else :key="oneI.toString()" :index="oneI.toString()">
          <template slot="title">
            <i :class="oneItem.icon"></i>
            <span slot="title">{{ oneItem.uname }}</span>
          </template>
          <template v-for="(twoItem, twoI) in oneItem.children">
            <el-menu-item
              :key="twoI"
              :index="oneI + '-' + twoI"
              @click="$router.push(twoItem.paths)"
            >
              <template>
                <i :class="twoItem.icon"></i>
                <span>{{ twoItem.uname }}</span>
              </template>
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
      <!-- <el-menu-item index="/welcome">
        <i class="iconfont icon-shouye1"></i>
        <span slot="title">管理首页</span>
      </el-menu-item>
      <el-submenu>
        <template slot="title" index="">
          <i class="iconfont icon-xueyuan1"></i>
          <span>学员管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/studentManager/product">
            <i class="iconfont icon-shangpinguanli"></i>
            学员项目管理
          </el-menu-item>
          <el-menu-item index="/studentManager/profill">
            <i class="iconfont icon-shuju1"></i>
            学员资料
          </el-menu-item>
          <el-menu-item index="/studentManager/dormitory">
            <i class="iconfont icon-shouye"></i>
            学员宿舍
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="/attendance">
        <i class="iconfont icon-kaoqin3"></i>
        <span slot="title">考勤管理</span>
      </el-menu-item>
      <el-menu-item index="/users">
        <i class="iconfont icon-yonghu"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/statistics">
        <i class="iconfont icon-shuju2"></i>
        <span slot="title">数据统计</span>
      </el-menu-item>
      <el-menu-item index="/mine">
        <i class="iconfont icon-wode"></i>
        <span slot="title">我的中心</span>
      </el-menu-item>
      <el-submenu>
        <template slot="title" index="">
          <i class="iconfont icon-VIP4"></i>
          <span>vip管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/vipmanager/charge">
            <i class="iconfont icon-chongzhi"></i>
            vip充值
          </el-menu-item>
          <el-menu-item index="/vipmanager/order">
            <i class="iconfont icon-dd"></i>
            订单管理
          </el-menu-item> -->
    </el-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import menuData from "./menuData";
export default {
  data() {
    return {
      collapseSwitch: true,
      num: "",
      // menuData,
    };
  },
  computed: {
    ...mapState("auths", ["menus"]),
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    btnFn(menus) {
      console.log(menus);
    },
  },
  props: {
    MenuWidth: {
      type: Number,
      required: true,
    },
  },
  watch: {
    $route(to, from) {
      // if(to.fullPath == )
      for (let x = 0; x < this.menus.length; x++) {
        if (this.menus[x].path == to.fullPath) {
          this.num = x;
        }
        if (this.menus[x].children) {
          for (let y = 0; y < this.menus[x].children.length; y++) {
            if (this.menus[x].children[y].paths == to.fullPath) {
              this.num = x + "-" + y;
            }
          }
        }
      }
    },
    MenuWidth(newdata) {
      this.collapseSwitch = newdata === 200 ? true : false;
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  // width: 200px;
  height: 100%;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
  // transition: all 0.3s linear;
  transition: width 0.3s;
  .logo {
    height: 60px;
    width: 100%;
    background: #4d5df9 url(../../assets/imgs/logo.be8bbddf.png) no-repeat
      center 40% /80%;
  }
}
.el-menu {
  border-right: none;
}
.iconfont {
  font-size: 20px;
  margin-right: 14px;
  color: #4e5bf8;
}
</style>
